<template>
  <div class="person-menu-box">
    <el-menu :default-active="route.name" class="el-menu-vertical-demo">
      <el-menu-item
          v-for="(item, index) in menuList"
          :key="index"
          :index="item.index"
          @click="toDetail(item.path, item.index)"
      >
        <svg-icon
            :icon-name="item.iconfont"
            class="iconfont"
            :color="getIconColor(item.index)"
            size="22px"
        ></svg-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
// 菜单列表
const menuList = reactive<Array<any>>([
  {
    index: 'PersonDetail',
    iconfont: 'icon-jibenziliao',
    title: '个人信息',
    path: '/person/personDetail'
  },
  {
    index: 'PersonIntegral',
    iconfont: 'icon-jifen',
    title: '我的资产',
    path: '/person/personIntegral'
  },
  {
    index: 'AccountSetting',
    iconfont: 'icon-shezhi',
    title: '账号设置',
    path: '/person/accountSetting'
  },
  {
    index: 'MyResume',
    iconfont: 'icon-xiangmujingli-04',
    title: '我的简历',
    path: '/person/myResume'
  },
  {
    index: 'LegoCreate',
    iconfont: 'icon-jimu',
    title: '积木创作',
    path: '/person/legoCreate'
  },
  {
    index: 'MyOnlineResume',
    iconfont: 'icon-zaixianyonghu',
    title: '在线简历',
    path: '/person/myOnlineResume'
  },
  {
    index: 'MyComment',
    iconfont: 'icon-pinglun1',
    title: '我的评论',
    path: '/person/myComment'
  },
  {
    index: 'MyMessageLog',
    iconfont: 'icon-pinglun1',
    title: '我的消息',
    path: '/person/myMessageLog'
  }
  ,
  {
    index: 'MyContribute',
    iconfont: 'icon-caogaoxiang1',
    title: '我的贡献',
    path: '/person/myContribute'
  }
]);

const route = useRoute();
const router = useRouter();
// 返回图标颜色
const currentIndex = ref<any>(route.name); // 选中的菜单index
const getIconColor = (index: number) => {
  // console.log(currentIndex.value === index ? '#2cbd99' : '#303133');
  return currentIndex.value === index ? '#2cbd99' : '#303133';
};

// 跳转详情
const toDetail = (path: string, index: string) => {
  currentIndex.value = index;
  router.push(path);
};
</script>
<style lang="scss" scoped>
.person-menu-box {
  padding: 30px 0 10px 0;

  .iconfont {
    margin-right: 15px;
  }
}
</style>
